//创建坐标点对象（鼠标位置）
function Pointer(x,y){
	this.x = x;
	this.y = y;
}
//创建定位位置对象(图片位置)
function Position(left,top){
	this.left = left;
	this.top = top;
}
$(".item_content .item").each(function(i){/*循环获取变量*/
	//初始化功能：把浮动布局改为定位布局
	this.init=function(){
		this.box=$(this).parent();//用box来存储每个item的父元素li
		$(this).attr("index",i).css({/*index为每个元素的序列号*/
			"position" : "absolute",
			"left" : this.box.offset().left,/*将父元素的偏移量赋给当前元素*/		
			"top" : this.box.offset().top
		}).appendTo(".item_content");/*将当前元素添加到.item_content中，方便后续查找兄弟元素*/
		this.drag();//初始化拖拽功能
	}
	//拖拽功能
	this.drag=function(){
		var oldPointer = new Pointer();/*鼠标拖动前的位置*/
		var oldPosition = new Position();/*图片拖动前位置*/
		var currentItem = null;
		var isDrag = false;//存储元素是否在被拖拽的状态
		$(this).mousedown(function(ev){
			ev.preventDefault();//阻止默认事件
			currentItem = this;//保存当前被拖拽元素
			oldPointer.x = ev.clientX;//获取鼠标的位置坐标
			oldPointer.y = ev.clientY;
			oldPosition.left = $(this).position().left;//获取当前对象的位置坐标
			oldPosition.top = $(this).position().top;
			isDrag = true;//鼠标点击时设定当前元素处于拖拽状态
			$(document).mousemove(function(ev){//将鼠标移动绑定到当前文档
				var currentPointer = new Pointer(ev.clientX,ev.clientY);//保存当前鼠标坐标
				if(!isDrag) return false;//若不处于拖动状态则返回
				$(currentItem).css({//拖动过程中改变元素模糊度，及层级
					"opacity" : 0.8,
					"z-index" : 999
				});
				var _left = currentPointer.x - oldPointer.x + oldPosition.left;//获取鼠标拖拽距离+原来图片位置的值
				var _top = currentPointer.y - oldPointer.y + oldPosition.top;
				//改变被拖拽元素的位置
				$(currentItem).css({
					"left" : _left,
					"top" : _top
				});
				//碰撞检测
				currentItem.pointer = currentPointer;
				currentItem.collisionCheck();
			});
			$(document).mouseup(function(){//鼠标抬起-->解绑元素
				if (!isDrag) return false;
				isDrag = false;
				//移动结束后改回原来的透明度和层级
				currentItem.move(function(){
					$(this).css({
						"opacity" : 1,
						"z-index" : 0
					});
				});
			});
		});
	}
	//碰撞检测功能
	this.collisionCheck = function(){ 
		var currentItem = this;//保存当前拖拽对象
		var direction = null;//交换的方向
		$(this).siblings(".item").each(function(){//jquery找兄弟元素
			/*当前鼠标的x值大于相连图片的左边,y值大于上边
			且x值小于右边，y值小于下部
			offset()方法里只有left和top值,即当前拖动的鼠标进入兄弟图片区域*/
			if (currentItem.pointer.x > this.box.offset().left && currentItem.pointer.y > this.box.offset().top && (currentItem.pointer.x < this.box.offset().left + this.box.width()) && (currentItem.pointer.y < this.box.offset().top + this.box.height())) {
				//console.log("碰撞成功！");
				if (currentItem.box.offset().top < this.box.offset().top){
					direction = "down";
				} else if (currentItem.box.offset().top > this.box.offset().top) {
					direction = "up";
				} else{
					direction = "normal";
				}
				//执行交换的功能
				this.swap(currentItem,direction);
			}
		});
	}
	//交换功能
	this.swap = function(currentItem,direction){
		var directions = {
			normal : function(){//左右碰撞
				//交换碰撞成功的父元素,this指代碰撞成功的兄弟元素
				var saveBox = this.box;//通过中间变量来实现替换父元素，通过父元素来定位
				this.box = currentItem.box;
				currentItem.box = saveBox;
				this.move();
				$(this).attr("index",this.box.index());
				$(currentItem).attr("index",currentItem.box.index());

			},
			down : function(){
				var box = this.box;
				var node = this;//保存当前节点,即被碰撞成功的兄弟节点
				var startIndex = currentItem.box.index();
				var endIndex = node.box.index();
				for (var i = endIndex; i > startIndex; i--) {
					//通过改变父节点来定位并移动元素
					var prevNode = $(".item_content .item[index="+(i-1)+"]")[0];//前一个节点
					node.box = 	prevNode.box;
					$(node).attr("index",node.box.index());	
					node.move();
					node = prevNode;
				}	
				currentItem.box = box;	
				$(currentItem).attr("index", box.index());
			},
			up : function(){
				var box = this.box;
				var node = this;//保存当前节点,即被碰撞成功的兄弟节点
				var endIndex = currentItem.box.index();
				var startIndex = node.box.index();
				for (var i = startIndex; i < endIndex; i++) {
					var beforNode = $(".item_content .item[index="+(i+1)+"]")[0];//后一个节点
					node.box = 	beforNode.box;
					$(node).attr("index",node.box.index());	//此时node父元素已经改变
					node.move();
					node = beforNode;
				}	
				currentItem.box = box;	
				$(currentItem).attr("index", box.index());

			}
		}
		directions[direction].call(this);//js中的方法选择器可用.或[],当前的方法为变量或者数字时，宜使用[]
	}
	//移动功能
	this.move = function(callback){//传入回调函数
		$(this).animate({
			left : this.box.offset().left,//动画返回父元素位置（this.box）
			top : this.box.offset().top
		},500,function(){
			callback&&callback.call(this);//若回调函数存在则执行该函数,call方法改变重定向this
		});
	}
	this.init();
});